<template>
	<div class="middle_news">
		<span>国内资讯</span>
		<ul>
			<li v-for="item in newLists">
				<i class="el-icon-s-promotion"></i>
				<a :href="item.sourceUrl" target="_blank">{{item.title}}</a>
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				newLists: [], //新闻数组		
			}
		},
		methods: {
			getnews: function() {
				this.$axios({
					method: 'post',
					url: 'http://route.showapi.com/2217-4?showapi_appid=610642&showapi_sign=200e35bac9af4e4ab0f0d360336098f6'
				}).then(response => {
					// console.log(response.data.showapi_res_body.newsList);
					this.newLists = response.data.showapi_res_body.newsList
				}).catch(error => {
					console.log(error);
				})
			}
		},
		mounted() {
			this.getnews()
		}
	}
</script>

<style>
	.middle_news {
		padding: 10px;
		height: calc(50vh-20px);
		text-align: left;
		border: 1px #F8F9FA solid;
		background-color: white;
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
	}

	.middle_news ul li {
		padding: 2px;
		font-size: calc(1.1876em);
		height: calc(5vh);
		line-height: calc(5vh);
		background-color: #F8F9FA;
		border-radius: 10px;
		margin-bottom: 5px;
	}

	.middle_news ul {
		margin-top: 15px;
	}

	.middle_news ul li a:hover {
		color: rgb(112 154 197);
	}
</style>
